<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>3.列表过滤</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <input type="text" placeholder="请输入关键词" v-model="keyword">
            <ul>
                <li v-for="p in persons2" :key="p.id">
                    {{p.name}} - {{p.age}} - {{p.gender}}
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            //阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false 
            new Vue({
                el:'#demo',
                data:{
                    keyword:'',
                    persons:[
                        {id:'atsd766512',name:'马冬梅',age:19,gender:'女'},
                        {id:'atsd766513',name:'周冬雨',age:20,gender:'女'},
                        {id:'atsd766514',name:'周杰伦',age:21,gender:'男'},
                        {id:'atsd766515',name:'温兆伦',age:22,gender:'男'}
                    ],
                    persons2:[]
                },
                watch:{
                    keyword:{
                        immediate:true,
                        handler(value){
                            // console.log('keyword变化了，我要进行过滤了',value)
                            // 进行过滤
                            /* let x = this.persons.filter((p)=>{
                                return p.name.indexOf(value) !== -1
                            }) */
                            this.persons2 = this.persons.filter(p => p.name.indexOf(value) !== -1)
                        }
                    }
                }
            })
        </script>
    </body>
</html>